import React, { useState } from 'react'
import styles from './index.module.less'
 const MenuItems = (props)=> {
   const [active, setactive] = useState(false)
     let {List} = props
    return (
      <div className={active?(styles.menuitem +" "+ styles.active):styles.menuitem}>
          <aside className={styles.asideLeft}>
            <main>
              <ul>
                <li>分类</li>
                <li><i className="iconfont icon-flag_fill"></i>本周销量榜</li>
                <li><i className="iconfont icon-flag_fill"></i>点过的菜</li>
              </ul>
              <ul>
                {
                  List.map((item,i)=>{
                    let {items=[],index,name} = item
                    return(
                    <li key={index}>{name}</li>
                    )
                  })
                }
              </ul>
            </main>
            <p onClick={()=>setactive(!active)}>
              <i className="iconfont icon-other"></i>
              <span>分类</span>
            </p>
          </aside>
          <aside className={styles.asideRight}></aside>
      </div>
    )
}
export default MenuItems
